<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { areaList } from '../data/areaData';
import type { AreaItem, ContinentItem, CountryItem } from '@/types';

const cityRef = ref<any>(null);
const selectedContinent = ref('');
const selectedCountry = ref('');
const selectedCity = ref('');
const countrys = ref<ContinentItem[]>([]);
const citys = ref<CountryItem[]>([]);
const machineRooms = ref<string[]>([]);

onMounted(() => {
  // 首次加载全部
  setAllFn();
});

// 设置全部
const setAllFn = () => {
  areaList.forEach((value) => {
    value.children.forEach((val) => {
      countrys.value.push(val);
      val.children.forEach((v) => {
        if (v.city !== '--') {
          citys.value.push(v);
        }
        machineRooms.value = [...machineRooms.value, ...v.machineRooms];
      });
    });
  });
};

// 设置国家
const clickContinentFn = (data: AreaItem) => {
  console.log('countrys', data);
  countrys.value = data.children;

  if (selectedContinent.value !== data.continent) {
    selectedContinent.value = data.continent;
    selectedCountry.value = countrys.value[0].country;
    selectedCity.value = countrys.value[0].children[0].city;
    citys.value = countrys.value[0].children;
    machineRooms.value = countrys.value[0].children[0].machineRooms;
  }
};
// 设置城市
const clickCountryFn = (data: ContinentItem, event: Event) => {
  console.log('citys', data);
  event.stopPropagation();
  citys.value = data.children;

  if (selectedCountry.value !== data.country) {
    selectedCountry.value = data.country;
    selectedCity.value = citys.value[0].city;
    machineRooms.value = citys.value[0].machineRooms;

    const obj: any = findLocation(data.country);
    countrys.value = obj.continent.children;
    selectedContinent.value = obj.continent.continent;
  }
};
// 设置机房
const clickCityFn = (data: CountryItem, event: Event) => {
  console.log('machineRooms', data);
  event.stopPropagation();
  const obj: any = findLocation(data.city);
  console.log(68, obj);

  selectedContinent.value = obj.continent.continent;
  selectedCountry.value = obj.country.country;
  selectedCity.value = obj.city.city;
  countrys.value = obj.continent.children;
  citys.value = obj.country.children;
  machineRooms.value = obj.city.machineRooms;

  // 点击机房时，使上一级城市按钮回到最顶部
  const index = citys.value.findIndex((item) => item.city === obj.city.city);
  const buttonElement: any = cityRef.value.querySelectorAll('.citys')[index];
  buttonElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
};
// 点击机房
const choiceMachineRoom = (str: string) => {
  const data: any = findLocation(str);
  machineRooms.value = data.city.machineRooms;
  citys.value = data.country.children;
  countrys.value = data.continent.children;
  selectedContinent.value = data.continent.continent;
  selectedCountry.value = data.country.country;
  selectedCity.value = data.city.city;

  // 点击机房时，使上一级城市按钮回到最顶部
  const index = citys.value.findIndex((item) => item.city === data.city.city);
  const buttonElement = cityRef.value.querySelectorAll('.citys')[index];
  buttonElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
};

// 根据地区名称查找上下级关系
function findLocation(key: string) {
  let data = {};
  for (const area of areaList) {
    for (const continentItem of area.children) {
      for (const countryItem of continentItem.children) {
        if (
          countryItem.machineRooms.includes(key) ||
          countryItem.city === key ||
          continentItem.country === key
        ) {
          data = {
            city: countryItem,
            country: continentItem,
            continent: area,
          };
        }
      }
    }
  }
  return data;
}
// 充值
const resetAreaFn = () => {
  selectedContinent.value = '';
  selectedCountry.value = '';
  selectedCity.value = '';
  countrys.value = [];
  citys.value = [];
  machineRooms.value = [];
  setAllFn();
};
</script>

<template>
  <div class="idc-area">
    <div class="container">
      <div class="areaBody">
        <div class="areaContent">
          <div class="areaBox">
            <i class="iconfont icon-zhongzhi" @click="resetAreaFn()"></i>
            <div class="left">
              <div class="top">
                <div
                  class="continents"
                  :class="{ active: selectedContinent === item.continent }"
                  v-for="item in areaList"
                  :key="item.key"
                  @click="clickContinentFn(item)"
                >
                  <span>{{ item.continent }}</span>
                </div>
              </div>
              <div class="line"></div>
              <div class="bottom">
                <div
                  class="countrys"
                  :class="{ active: selectedCountry === value.country }"
                  v-for="value in countrys"
                  :key="value.key"
                  @click="clickCountryFn(value, $event)"
                >
                  <span>{{ value.country }}</span>
                </div>
              </div>
            </div>
            <div class="middle" ref="cityRef">
              <div
                class="citys"
                :class="{ active: selectedCity === val.city }"
                v-for="val in citys"
                :key="val.key"
                @click="clickCityFn(val, $event)"
              >
                <span>{{ val.city }}</span>
              </div>
            </div>

            <div class="right">
              <div
                class="machineRooms"
                v-for="v in machineRooms"
                :key="v"
                @click="choiceMachineRoom(v)"
              >
                <span>{{ v }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
// 声明公共样式
.options-style {
  min-width: 100px;
  padding: 3px 0;
  background-color: #f7f7fb;
  border-radius: 15px;
  border: 1px dashed #555656;
  display: flex;
  justify-content: center;
  align-items: center;

  span {
    font-family: 'SourceHanSansCN-Normal';
    font-size: 18px;
    color: #000000;
  }

  &:hover {
    cursor: pointer;
    background-color: #cccccc;
  }

  &.active {
    background-color: #cccccc;
  }
}

.idc-area {
  background-color: #f2f7f7;
  padding-bottom: 150px;
  .container {
    height: 555px;
    background-image: linear-gradient(to bottom, #9656fe, #efb37d);
    border-radius: 50px;
    padding: 15px;
    .areaBody {
      width: 100%;
      height: 100%;
      background-color: #fff;
      border: 1px solid #b9b9b9;
      border-radius: 38px;
      padding: 15px;
      .areaContent {
        width: 100%;
        height: 100%;
        border: 2px solid #d1d1d1;
        border-radius: 30px;
        padding: 20px;
        .areaBox {
          position: relative;
          height: 100%;
          display: flex;
          justify-content: space-between;
          overflow-x: auto;

          .icon-zhongzhi {
            position: absolute;
            top: 0px;
            left: 0px;
            font-size: 20px;
            color: #818181;
            &:hover {
              color: #cccccc;
              cursor: pointer;
            }
          }

          .left {
            min-width: 260px;
            height: 100%;
            border-right: 2px solid;
            border-radius: 1px;
            border-image: linear-gradient(to bottom, #555656, #ffffff);
            border-image-slice: 1;
            display: flex;
            flex-direction: column;

            .top {
              width: 100%;
              height: 160px;
              padding: 20px;
              display: grid;
              grid-template-columns: repeat(2, 1fr);
              grid-gap: 10px;
              justify-content: space-between;
              align-items: center;

              .continents {
                @extend .options-style;
              }
            }
            .line {
              width: 100%;
              height: 2px;
              border-radius: 1px;
              background-image: linear-gradient(to right, #555656, #ffffff);
            }
            .bottom {
              width: 100%;
              height: auto;
              padding: 20px;
              display: grid;
              grid-template-columns: repeat(2, 1fr);
              grid-gap: 10px;
              justify-content: space-between;
              align-items: center;
              overflow-y: auto;
              .countrys {
                @extend .options-style;
              }
            }
          }

          .middle {
            min-width: 115px;
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow-y: auto;
            padding-top: 10px;
            border-right: 2px solid;
            border-radius: 1px;
            border-image: linear-gradient(to bottom, #555656, #ffffff);
            border-image-slice: 1;
            .citys {
              @extend .options-style;
              padding-left: 10px;
              padding-right: 10px;
              margin: 5px 0;
            }
          }

          .right {
            min-width: 390px;
            padding: 10px;
            flex: 1;
            overflow-y: auto;
            .machineRooms {
              @extend .options-style;
              padding-left: 10px;
              padding-right: 10px;
              height: 30px !important;
              margin: 5px 10px;
              display: inline-block;
            }
          }
        }
      }
    }
  }
}

/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 8px; /* 设置滚动条宽度 */
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background-image: linear-gradient(
    to bottom,
    #7c7c7c,
    #ffffff
  ); /* 设置滚动条颜色 */
  border-radius: 10px; /* 设置滚动条圆角 */
}

::-webkit-scrollbar-track {
  background-color: #f2f2f2; /* 设置滚动条轨道颜色 */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #999; /* 设置滚动条悬停颜色 */
}

// xl(1200px)至xxl(1600px)
@media screen and (min-width: 1201px) and (max-width: 1600px) {
  .container {
    width: 85%;
  }
}

@media screen and (min-width: 993px) and (max-width: 1200px) {
  .container {
    width: 95%;
  }
}

@media screen and (max-width: 992px) {
  .container {
    width: 95%;
    .areaBody {
      .areaBox {
        .right {
          // width: 390px;
        }
      }
    }
  }
}
</style>
